<template>
  <view>
    <u-sticky bgColor="#fff">
      <Tabs :list="tabList" @click="handleTab" :current="currentTab" />
    </u-sticky>
    <swiper
      style="height: calc(100vh - 176rpx)"
      :current="currentTab"
      @change="changeTab"
    >
      <swiper-item>
        <Entertainment
          :type="tabList[currentTab].child"
          :page="page"
          :index="currentTab"
          @dataTotal="dataTotal"
        />
      </swiper-item>
      <swiper-item>
        <Theme-activity
          :type="tabList[currentTab].child"
          :page="page"
          :index="currentTab"
          @dataTotal="dataTotal"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index";
import Entertainment from "@/pages/home/cp/Entertainment";
import ThemeActivity from "@/pages/home/cp/ThemeActivity";

import { homeActivityType } from "@/request/homeApi.js";
export default {
  components: { Tabs, Entertainment, ThemeActivity },
  data() {
    return {
      currentTab: 0,
      tabList: [], // 菜单
      total: 0, // 总数
      pageNum: 0, // 分页数
      page: 1, // 页数
    };
  },
  onReachBottom() {
    if (this.total <= this.pageNum) return;
    this.page++;
  },
  created() {
    this.getType();
  },
  onShow() {
    const TEMP = this.page;
    this.page = 0;
    setTimeout(() => {
      this.page = TEMP;
    }, 0);
  },
  methods: {
    // 切换菜单
    handleTab(v) {
      this.currentTab = v.index;
    },
    // 切换tab
    changeTab(e) {
      this.currentTab = e.target.current;
      this.page = 1;
      uni.pageScrollTo(); // 滚动到顶部
    },
    // 获取活动类型
    getType() {
      homeActivityType().then((res) => {
        if (res.code == 1) {
          res.data.forEach((i) => {
            i.child.unshift({
              id: "",
              name: "全部",
              status_text: "",
            });
          });
          this.tabList = res.data;
        }
      });
    },
    // 获取数据数量
    dataTotal(v) {
      this.total = v.total;
      this.pageNum = v.dataNum;
    },
  },
};
</script>

<style lang="scss" scoped></style>
